<template>
  <div class="slide-box">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in newsList" :key="index">
        <span>{{ slide.title }}</span>
        <em>{{ slide.pubDate }}</em>
      </swiper-slide>
    </swiper>

    <div style="font-size: 30px; font-weight: liner">
      武汉市xxx餐饮集团有限公司
    </div>
    <div style="font-size: 30px; font-weight: normal">
      武汉市xxx餐饮集团有限公司
    </div>
    <div style="font-size: 30px; font-weight: bold">
      武汉市xxx餐饮集团有限公司
    </div>
    <div style="font-size: 30px; font-weight: bolder">
      武汉市xxx餐饮集团有限公司
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  data() {
    return {
      newsList: [
        {
          title: "武汉市xxx餐饮集团有限公司",
          pubDate: "2019-08-08",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-08-07",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-08-05",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-08-03",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-08-02",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-08-01",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-07-02",
        },
        {
          title: "上海市xxx餐饮集团有限公司",
          pubDate: "2019-06-01",
        },
      ],
      swiperOption: {
        //swiper无缝滚动配置项
        // notNextTick: true,
        direction: "horizontal",
        speed: 1500, //滚动速度
        // setWrapperSize: true,
        // freeMode: true, //true则是自由模式，不会自动贴合滑动位置
        autoplay: {
          delay: 1,
          autoplayDisableOnInteraction: false,
        },
        loop: true, //循环
        // observer: true, //修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // spaceBetween: 4, //slide之间的距离（单位px）
        // slidesPerView: 6, //slide可见数量
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

<style scoped>
.swiper-wrapper {
  transition-timing-function: linear !important;
}
</style>
